<template>
  <a-table
    :dataSource="dataList"
    :columns="columns"
    :loading="loading"
    rowKey="id"
    :scroll="{ x: 'max-content'}"
    :pagination="pagination"
    @change="handleTableChange"
  >
  </a-table>
</template>

<script>
import {defineComponent, reactive, watch, toRefs, computed} from "vue";
import _ from "lodash";
import request from "@/common/utils/request";


export default defineComponent({
  name: "ClueTable",
  components: {

  },
  props: {
    editId: {
      type: [Number, String, undefined],
      default: undefined,
    },
  },
  setup(props, {emit}) {
    const state = reactive({
      dataList: [],
      loading: false,
      page: 1,
      limit: 10,
      total: 0,
    });

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.limit,
      showSizeChanger: true,
    }));


    const getDataList = (init = false) => {
      state.loading = true;
      if (init) {
        state.page = 1;
      }
      const params = {
        page: state.page,
        pageSize: state.limit,
        id: props.editId,
        tab: 1,
      };

      request
        .post("/org", "/business/plan/completionList", params)
        .then((res) => {
          state.dataList = res?.data || [];
          state.total = res?.total || 0;
        })
        .finally(() => {
          state.loading = false;
        });
    };
    const handleTableChange = (pager) => {
      state.page = pager.current;
      state.limit = pager.pageSize;
      getDataList();
    };

    getDataList(true);

    return {
      ...toRefs(state),
      columns,
      pagination,
      handleTableChange,
    };
  },
});

const columns = [
  {
    title: "联系人名称",
    dataIndex: "contact_name",
    key: "contact_name",
    align: "center",
    width: '20%',
  },
  {
    title: "手机号码",
    dataIndex: "contact_phone",
    key: "contact_phone",
    align: "center",
    width: '20%',
  },
  {
    title: "线索状态",
    dataIndex: "status_txt",
    key: "status_txt",
    align: "center",
    width: '20%',
  },
  {
    title: "新建人",
    dataIndex: "creator_name",
    key: "creator_name",
    align: "center",
    width: '20%',
  },
  {
    title: "新建时间",
    dataIndex: "created_at",
    key: "created_at",
    align: "center",
    width: '20%',
  },
];
</script>

<style lang="less" scoped>

</style>
